<template>
    <Tabs :value="name">
        <TabPane label="关系图" name="Image">
            <div class="CodeTabPaneView">
                <div class="imgView"><img src="./image.png" alt /></div>
            </div>
        </TabPane>
        <TabPane label="组件引用" name="RunView">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[0] }}</code></pre>
            </div>
        </TabPane>

        <TabPane label="业务逻辑" name="businessView">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[1] }}</code></pre>
            </div>
        </TabPane>

        <TabPane label="Table_Select.vue" name="Table_Select">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[2] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="Table_SelectEdit.vue" name="Table_SelectEdit">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[3] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="Table_Text.vue" name="Table_Text">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[4] }}</code></pre>
            </div>
        </TabPane>

        <TabPane label="数据模型" name="store">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[5] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="伪装接口" name="simulateApi">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[6] }}</code></pre>
            </div>
        </TabPane>
    </Tabs>
</template>
<script>
import RunView from './RunView.vue?raw'
import businessView from './businessView.vue?raw'
import Table_Select from './Table_Select.vue?raw'
import Table_SelectEdit from './Table_SelectEdit.vue?raw'
import Table_Text from './Table_Text.vue?raw'
import store from './store.js?raw'
import simulateApi from './simulateApi?raw'

export default {
    data() {
        return {
            name: 'Image',
            Code: [RunView, businessView, Table_Select, Table_SelectEdit, Table_Text, store, simulateApi]
        }
    },
    mounted() {
        setTimeout(() => {
            Prism.highlightAll()
        }, 100)
    }
}
</script>